<template>
  <div id="app">
    <div class="ctx">
       <Find v-show="defaultActive===0" />
       <Travel v-show="defaultActive===1" />
       <My  v-show="defaultActive===2"  />
    </div>
    <Footer :defaultActive="defaultActive" @changeActive="changeActive"/>
  </div>
</template>

<script>
import Find   from '@/components/find'
import Travel from '@/components/travel'
import My     from '@/components/my'
import Footer from '@/components/footer'
import             '@/icon/icon.css'
export default {
  components:{
    Footer,Find,Travel,My
  },
  data(){
    return {
      defaultActive:0
    }
  },
  methods:{
    changeActive(index){
      this.defaultActive = index
    }
  }
}
</script>
<style scoped>

.ctx{
  width: 100vw;
  height: 100vh;
  padding-bottom: 60px;
  box-sizing: border-box;
  background:#f8f8f8;
}
</style>
